<div class="row">
    <div class="col-sm-12 footer-txt-editor">
        <div class="sws-border">
            <h4 class="header-text">Enter Footer Text</h4>
            <ngx-suneditor #footerSunEditor class="ngx-suneditor-wrapper" [options]="footerEditorOptions"
                [content]="footerContent" (onChange)="FooterTxtChange($event)" (paste)="onFooterTxtPaste($event)"
                (onPaste)="onFooterTxtPaste($event)"></ngx-suneditor>
        </div>
    </div>
</div>

<div class="line-break"></div>

<div class="socialBrand-wrapper mt-3">
    <div class="row gx-0 mt-2">
        <div class="col-sm-12">
            <div class="input-group sws-border">
                <input type="text" class="form-control" [(ngModel)]="selectedValue" [ngbTypeahead]="search"
                    id="autocompleteInput" placeholder="Search social or brand icon"
                    (selectItem)="onSelectItem($event)" #brandSearch/>
                <span class="input-group-text search-icon" id="search-icon">
                    <i class="fas fa-search text-grey" aria-hidden="true"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="socialBrand-wrapper mt-3" *ngFor="let brand of selectedBrands;let i = index">
        <div class="row gx-0 btn-type-wrapper sws-border">
            <div class="col-2">
                <span class="icon-container">
                    <fa-icon id="toolBar-icon-wrapper-{{brand.iconName}}" [icon]="brand"
                        [ngStyle]="{'color':brand.color}"></fa-icon>
                </span>
            </div>
            <div class="col-10"> <!-- col-6 col-sm-10 -->
                <div class="input-group">
                    <input type="text" class="form-control" [(ngModel)]="brand.link"
                        placeholder="{{brand.iconName}} link" (ngModelChange)="iconLinkChange(brand)">

                    <span class="color-picker-wrapper input-group-text">
                        <input type="color" id="colorPicker" class="form-control" [(ngModel)]="brand.color"
                            (ngModelChange)="iconColorChange(brand)" value="#EEEEEE">
                    </span>
                    <span class="icon-wrapper input-group-text">
                        <i class="fa-solid fa-floppy-disk" (click)="brand.link ? footerLinkChange(brand) : ''"
                            [ngStyle]="{'color': (this.isValidLink(brand.link) && ((brand.changed || brand.linkChanged) || brand.src == undefined) ) ? '#ef8081':'#ccc'}"></i>
                        <i class="fa-solid fa-trash-can" (click)="deleteIcon(brand)"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="icon-note"><b>NOTE:</b> Add link with https:// . Choose color. Click save. Icons without link will not
        be included in
        emails.</div>
    <div class="line-break"></div>
    <div class="declamation-wrapper">
        <div class="row gx-0 btn-type-wrapper sws-border">
            <div class="col-2">
                <!-- col-6 col-sm-2 -->
                <span class="icon-container">
                    <input type="checkbox" class="unsub-checkbox" [checked]="includeUnsubscribe" id="unsubscribe"
                        name="unsubscribe" value="unsubscribe" (click)="unsubscribeStatus()">
                </span>
            </div>
            <div class="col-10">
                <!-- col-6 col-sm-10 -->
                <div class="input-group">
                    <label for="unsubscribe" (click)="unsubscribeStatus()" class="checkbox-label">
                        Include Unsubscribe Link
                    </label>

                    <span class="color-picker-wrapper input-group-text">
                        <input type="color" class="form-control" [(ngModel)]="unsubscribeColor"
                            (ngModelChange)="unsubscribeColorChange()">
                    </span>
                </div>
            </div>
        </div>
        <p class="email-note">
            <b>NOTE:</b> All marketing emails MUST contain an unsubscribe link. Not having one will affect your sending
            reputation and your
            emails are more likely to end up in spam folders.
            <!-- An unsubscribe link is always added to all marketing emails. -->
        </p>
    </div>
</div>